<template>
  <div class="search">
    <div class="top-bg"></div>
    <div class="search-category w">
      <ul class="clearfix">
        <li v-for="(item, index) in typeProps" :key="index">
          <a
            href="javascript:void(0);"
            :class="{ active: typeIndex === index }"
            @click.prevent="switchSeach(item, index)"
            >{{ item.name }}</a
          >
        </li>
      </ul>
    </div>
    <div class="search-list w">
      <div class="song-list">
        <div class="play-total" style="display:none">
          <i class="iconfont icon-play1"></i>
          <span>播放全部</span>
        </div>
        <song-table :songList="songList"></song-table>
      </div>
    </div>
  </div>
</template>
<script>
import { search, getSongsDetail } from '@/api/search'

export default {
  data () {
    return {
      // 类型参数列表
      typeProps: [
        { name: '单曲', type: 1 },
        { name: '专辑', type: 10 },
        { name: '歌手', type: 100 },
        { name: 'MV', type: 1004 },
        { name: '视频', type: 10014 }
      ],
      typeIndex: 0,
      songList: []
    }
  },
  methods: {
    // 点击分类事件
    switchSeach (item, index) {
      this.typeIndex = index
      window.console.log(item)
    },
    async getSearch () {
      const _params = {
        keywords: this.$route.query.keywords,
        limit: 30,
        type: this.typeProps[this.typeIndex].type
      }
      const data = await search(_params)
      const _songList = data.result.songs
      const idList = _songList
        .map(item => {
          return item.id
        })
        .join(',')
      const avatars = await getSongsDetail({ ids: idList })
      _songList.forEach(item2 => {
        item2.artists = item2.artists
          .map(v => {
            return v.name
          })
          .join(' / ')
        avatars.songs.forEach(item3 => {
          if (item3.id === item2.id) {
            item2.picUrl = item3.al.picUrl
          }
        })
      })
      this.songList = _songList
    }
  },
  created () {
    this.getSearch()
  },
  watch: {
    '$route.query.keywords' (newVal) {
      this.getSearch()
    }
  }
}
</script>
<style lang="less">
.search {
  .top-bg {
    width: 100%;
    height: 247px;
    background: url('../../assets/images/bg_music.png') no-repeat center 32%;
    background-size: cover;
  }
  .search-category {
    height: 50px;
    line-height: 50px;
    ul {
      li {
        float: left;
        margin-right: 40px;
        text-align: center;
        width: 40px;
        a {
          font-size: 14px;
          color: #777;
          &.active {
            color: @main-font-color;
            font-weight: 600;
          }
        }
      }
    }
  }
  .search-list {
    margin-top: 20px;
    .play-total {
      cursor: pointer;
      padding: 5px;
      width: 100px;
      text-align: center;
      background-color: @main-font-color;
      border-radius: 10px;
    }
  }
}
</style>
